<template>
  <view class="p-l-30 p-r-30 p-t-32">
    <view class="card p-t-32 p-b-32 p-l-32 p-r-30 m-b-20" v-for="(item,i) in lists" :key="i" @click="jump(`/views/user/bankCard/add?id=${item.id}`)">
      <view style="color:#1A1A1A;" class="font-32 font-weight-500">{{ item.realname }}</view>
      <view style="color:#808080;" class="font-24 m-t-4">借记卡</view>
      <view style="color:#FB2D19;" class="font-48 font-weight-600 m-t-16">{{ bank_account(item.bank_account) }}</view>
    </view>
    <view class="add p-l-30 p-r-30 m-t-32" @click="jump('/views/user/bankCard/add')">
      <image class="w-32 h-32" src="@/static/images/ic_tianjia_16@2x.png"/>
      <view class="font-32 m-l-28">添加银行卡</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      lists:[]
    };
  },
  onShow() {
    this.getLists()
  },
  methods: {
    getLists(){
      this.$api.common.user('getUserBankCardList', {
        page: 1,
        page_size: 10,
      }).then(res => {
        if (res.code === 200) {
          this.lists = res.data
        }
      })
    },
    bank_account(val){
      // 只保留后四位，其余·。每四位加一个空格
      return val.substr(val.length - 4, 4).padStart(val.length, '·')
    }
  },
}
</script>

<style lang="scss">
.card{
  width: 690rpx;
  height: 220rpx;
  background: url("@/static/images/bg_yinhangka@2x.png") 0 0 /100% 100% no-repeat;
  box-sizing: border-box;
}

.add{
  width: 690rpx;
  height: 152rpx;
  background: #FFFFFF;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
</style>
